<template>
  <div class="vue-container">
    <common-form
      ref="commonForm"
      :disabled="disabled"
      :options="options"
      @handlerClick="handlerClick"
      @advancedSearch="handlerQuery"
    >
      <template slot="advanced-content">
        <el-form ref="advancedForm" style="margin-top: 20px;" :model="queryForm" label-width="80px">
          <el-form-item label="角色编码">
            <el-input v-model="queryForm.code" clearable />
          </el-form-item>
          <el-form-item label="角色名称">
            <el-input v-model="queryForm.name" clearable />
          </el-form-item>
          <el-form-item label="角色状态">
            <el-select
              v-model="queryForm.status"
              style="width: 100%;"
              clearable
              placeholder="请选择角色状态"
            >
              <el-option
                v-for="(item, index) in statusList"
                :key="index"
                :label="item.label"
                :value="Number(item.code)"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="queryForm.createTime"
              style="width: 100%;"
              type="datetimerange"
              placeholder="选择时间"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
        </el-form>
      </template>
    </common-form>
    <common-table
      :table-data="data"
      :columns="columns"
      :height="height"
      :current-page="queryForm.pageNum"
      :page-size="queryForm.pageSize"
      :total="totalPage"
      :loading="loading"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @handleSelectionChange="handleSelectionChange"
    >
      <!-- 列表序号 -->
      <template #serialNumber="scope">
        <span>{{
          Number(scope.index + 1) + (queryForm.pageNum - 1) * queryForm.pageSize
        }}</span>
      </template>
      <!-- 角色状态 -->
      <template #status="scope">
        <!--这里需要对开关进行特殊处理，admin超级管理员角色无法禁用-->
        <el-popconfirm
          v-permission="{ permission: 'system:role:update', disabled }"
          :disabled="scope.row.code === 'admin'"
          :title="scope.row.status === 1 ? '确定要禁用该角色吗？' : '确定要启用该角色吗？'"
          icon=""
          @confirm="popConfirm(scope.row)"
        >
          <el-switch
            slot="reference"
            v-model="scope.row.status"
            v-permission="{ permission: 'system:role:update', disabled }"
            :disabled="scope.row.code === 'admin'"
            :active-value="1"
            :inactive-value="2"
            @change="switchChange($event, scope.row)"
          />
        </el-popconfirm>
      </template>
      <template #createTime="scope">
        {{ scope.row.createTime | formatTime }}
      </template>
      <!-- 列表操作按钮-->
      <template #operation="scope">
        <el-button
          v-if="scope.row.code !== 'admin'"
          v-throttle
          v-permission="'system:role:update'"
          :size="size"
          type="text"
          icon="el-icon-edit-outline"
          @click.stop="handlerSave(scope.row)"
        >编辑</el-button>
        <el-button
          v-if="scope.row.code !== 'admin'"
          v-throttle
          v-permission="'system:role:del'"
          :size="size"
          type="text"
          icon="el-icon-delete"
          class="danger-btn"
          @click.stop="handlerDel(funs['del'], scope.row)"
        >删除</el-button>
      </template>
    </common-table>
    <!-- 新增or编辑组件 -->
    <add-or-update ref="addOrUpdate" :obj="{ statusList }" @ok="getList" />
    <!-- 全局导入组件 -->
    <to-channel ref="toChannel" title="角色导入" @change="getList" />
  </div>
</template>
<script>
import { mixin } from '@/views/pages/mixin'
import AddOrUpdate from './components/save'
export default {
  name: 'Role',
  components: {
    AddOrUpdate
  },
  mixins: [mixin],
  data() {
    return {
      statusList: [], // 角色状态数组
      // 表头数组
      columns: [
        {
          type: 'selection',
          width: '60'
        },
        {
          prop: 'number',
          label: '序号',
          width: '70',
          type: 'slot',
          slotType: 'serialNumber'
        },
        {
          prop: 'name',
          label: '角色名称'
        },
        {
          prop: 'code',
          label: '角色编码'
        },
        {
          prop: 'status',
          label: '角色状态',
          type: 'slot',
          slotType: 'status'
        },
        {
          prop: 'sort',
          label: '排序'
        },
        {
          prop: 'createUsername',
          label: '创建人'
        },
        {
          prop: 'createTime',
          type: 'slot',
          slotType: 'createTime',
          label: '创建时间'
        },
        {
          type: 'slot',
          prop: 'operation',
          label: '操作',
          width: '168',
          slotType: 'operation',
          align: 'center',
          fixed: 'right'
        }
      ]
    }
  },
  async created() {
    this.statusList = await this.getDictInfo('dict_status')
  },
  methods: {
    // 角色状态切换触发
    switchChange(e, form) {
      form.status = e === 1 ? 2 : 1
    },
    // 确认禁用或启用
    popConfirm(form) {
      this.loading = true
      form.status = form.status === 1 ? 2 : 1
      form.isStatusChange = true
      this.funs['edit'](form).then(() => {
        if (form.status === 1) {
          this.$message.success('角色已启用')
        } else {
          this.$message.error('角色已禁用')
        }
      }).catch(e => {
        form.status = form.status === 1 ? 2 : 1
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>
